Treviso WordPress Theme

A theme that delivers on it’s promise to be fast, clean and customizable.

Speed Up and Clean Up!

Welcome to the Treviso WordPress Theme. A fast and minimalistic theme suitable for blog sites, business sites, portfolios and more. The main objective of this theme is to be fast! As a result, your pages will load in less time allowing you more room to use more plugins.

No Boated JS

A minimal amount of clean, effective JavaScript to power the theme

Customizable

Plenty of options in the Customizer to get that desired look and feel

Masonry Layout

Pages with multiple posts will be shown in a masonry style layout

Treviso uses the Bulma CSS Framework. In a nutshell, Bulma is a styling framework that’s modular and doesn’t contain any JavaScript.

 

Imagine Bootstrap but without a massive JS file to power components such as click handlers. Treviso contains a minimal amount of JS, only what is needed for the theme.

Made with

Bulma CSS Framework

The Features

The Treviso WordPress theme comes packed with the core features to enable you create an effective and consistent design.

Advanced Header Menu

Add a mega menu, make your header transparent or fixed. Or even both! Add images, posts and Font Awesome icons.

Customizable Footer

Add posts, images, icons with just a CSS class. Add a background image in addition to a custom copyright bar.

Social Share Links

Integrated into the theme in a light-weight, URL based way. All major social networks are supported and more to come.

Google Fonts, Font Awesome

Select any Google font for body text and header text. Font Awesome is included so you can use icon tags anywhere!

Hero Section

Add a hero section to the top of the page with a parallax effect. It’ll show your featured image with a title, excerpt and tag.

Have A Look!

Treviso can be configured in a number of different ways

FAQ

You can add classes to the Navbar Start header menu (Screen Options, check CSS classes). The following classes can be added to menu items.

  • “has-mega-menu” css class to top level navbar links to enable mega menu.
  • “is-img” to child of “has-mega-menu” to enable a mega menu image card. Define image src as URL.
  • “no-header” to any menu to disable the title.
  • “is-post” to child of “has-mega-menu” to enable a mega menu post card showing the latest post.
  • “post-{id} with “is-post” to define a particular post to show. Eg. “is-post post-222”.
  • “is-footer” to the last child of “has-mega-menu” to enable the mega menu footer.
  • “is-footer-left” or “is-footer-right” to the child of “is-footer” to define a left and right alignment.
  • “is-button” to any item to enable a navbar button.
  • Add font-awesome classes to any item to enable an icon. Eg. “fas fa-rss”.
  • “is-search” to any item to enable a navbar search icon and form.

Much like building the header you can add classes to the footer menu (Screen Options, check CSS classes). The following classes can be added to menu items.

  • “is-custom” css class to top level navbar links to enable a column with an image.
  • “is-img” to child of “is-custom” to enable a footer image. Define image src as URL.
  • “is-img-white” for an image with a white filter.
  • “no-header” to any menu to disable the the title.
  • “is-post” to child of “is-custom” to enable a post card showing the latest post.
  • “post-{id} with “is-post” to define a particular post to show. Eg. “is-post post-222”.
  • “is-social” to child of “is-custom” to add social icons.
  • Add font-awesome classes to child of “is-social” to enable an icon. Eg. “fab fa-facebook”.

Here’s an example of the CSS used on jbsoftware.ca to toggle the filter when the user scrolls down. Note this works best for SVG images.

.navbar-logo {
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}
.navbar .navbar-logo,
.navbar.is-transparent.is-scrolled .navbar-logo,
.navbar.is-transparent .navbar-logo:hover{
	-webkit-filter: invert(22%) sepia(91%) saturate(3080%) hue-rotate(215deg) brightness(78%) contrast(113%);
	filter: invert(22%) sepia(91%) saturate(3080%) hue-rotate(215deg) brightness(78%) contrast(113%);
}
.navbar .navbar-logo:hover,
.navbar.is-transparent.is-scrolled .navbar-logo:hover {
	-webkit-filter: none;
	filter: none;
}
.navbar.is-transparent .navbar-logo {
	-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1);
}

Yes. Below the transparent header option there is an option to disable it for certain posts (positive numbers) and categories (negative numbers). Use comma separated values. Eg. 3,14,15,-8 hide posts 3, 14 and 15 and all posts in category 8.

Treviso is a free theme hosted in the WordPress Theme Directory. Treviso is fully GPL compatible.

 

Head over to the WordPress theme repository to check it out: https://wordpress.org/themes/treviso/

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on reddit
Reddit
Share on email
Email
Back to top